<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <title>Document</title>
    </head>
    <body>
        <div id="components-demo">
            <button-counter></button-counter>
            <!-- 组件复用 每次使用都创建一个新实例 独立维护自己的值 -->
            <button-counter></button-counter>
            <button-counter></button-counter>

            <check-counter></check-counter>

            <!-- 组件的命名规则 -->
            <!-- 小写单词间用-链接 或者使用驼峰命名 -->
            <!-- 驼峰命名时不可以直接使用这个组件会报未知组件需要将其转化为小写单词用-链接的形式, 见:<HelloWorld>与<hello-world>-->
            <!-- 但是在模板中可以使用驼峰命名,见: <hello-test> -->
            <HelloWorld></HelloWorld>
            <hello-world></hello-world>
            <hello-test></hello-test>
        </div>

        <!-- 定义组件 -->
        <script type="text/javascript">
            Vue.component('button-counter', {
                data: function() {
                    return {
                        count: 0,
                    };
                },
                template: '<button v-on:click="count++">你点击了我 {{ count }} 次</button>',
            });
            Vue.component('check-counter', {
                data: function() {
                    return {
                        selected: true,
                    };
                },
                template:
                    '<select v-model="selected"><option disabled value="">请选择</option><option>A</option><option>B</option><option>C</option></select>',
            });
            Vue.component('HelloWorld', {
                data: function() {
                    return {
                        message: '点击我',
                    };
                },
                template: '<button>{{message}}</button>',
            });
            Vue.component('hello-test', {
                data: function() {
                    return {
                        msg: '看到我了吗2',
                    };
                },
                template: `
                    <div>
                        <div>{{msg}}</div>
                        <HelloWorld></HelloWorld>
                    </div>
                    `,
            });

            var vm = new Vue({
                el: '#components-demo',
            });
        </script>
    </body>
</html>
